<template>
  <div class='container'>
    <!-- 卡片区域 -->
    <el-card>
      <!-- 面包屑区域 -->
      <!-- <el-breadcrumb v-show="queryUrl.name" class="breadcrumb" separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>学科管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{queryUrl.name}}</el-breadcrumb-item>
        <el-breadcrumb-item>标签管理</el-breadcrumb-item>
      </el-breadcrumb> -->
      <!-- 表单区域 -->
      <el-form label-width="70px" :model="page">
        <!-- 首行搜索行左边 -->
        <el-row >
          <el-col :span="6">
            <el-form-item label="标签名称" label-width="100px">
              <el-input class="text-input" v-model="page.tagsName">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态">
              <el-select v-model="page.state" placeholder="请选择状态">
                <el-option
                  v-for="(item, index) in status"
                  :key="index"
                  :label="item.label"
                  :value="item.value">
                  </el-option>
                <!-- <el-option label="禁用" value="1"></el-option> -->
              </el-select>
              <el-button class="btn" size="mini" @click="cleartext">清除</el-button>
              <el-button type="primary" size="mini" @click="getList()">搜索</el-button>
            </el-form-item>
          </el-col>
          <!-- 首行右边返回学科和新增学科 -->
          <el-col :span="6" style="text-align: right">
            <el-form-item>
              <el-button v-show="queryUrl.name" class="el-icon-back" type="text" size="mini" @click="returnClick">返回学科</el-button>
              <el-button class="el-icon-edit" type="success" size="mini" @click="addDialogVisible = true">新增标签</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 警告数据弹框消息 -->
      <el-alert
        :title="`数据一共${total}条`"
        type="info"
        show-icon
        :closable="false">
      </el-alert>
      <!-- 列表区域数据  -->
          <el-table :data="tagsList" style="width: 100%" :cell-style="rowstyle">
            <el-table-column type="index" label="序号" width="100px"> </el-table-column>
            <el-table-column prop="subjectName" label="所属学科"> </el-table-column>
            <el-table-column prop="tagName" label="标签名称"> </el-table-column>
            <el-table-column prop="username" label="创建者" width="160px"></el-table-column>
            <el-table-column prop="addDate" label="创建日期" width="160px">
              <!-- 利用过滤器将时间格式化 (parseTimeByString方法路径在src/filters下)-->
              <template v-slot="{ row }">{{ row.addDate | parseTimeByString }}</template>
            </el-table-column>
            <el-table-column prop="state" label="状态" width="160px">
              <template v-slot="{ row }">
                <span v-if="row.state === 1">{{ '已开启' }}</span>
                <span v-else>{{ '已禁用' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" sortable="" fixed="right" width="280px">
              <template v-slot="{ row }">
                <el-button
                  type="text"
                  size="small"
                  @click="updateState(row)"
                >{{ row.state === 1 ? '禁用' : '启用' }}
                </el-button>
                <el-button type="text" size="small" :disabled="row.state === 1" @click="editClick(row)">修改</el-button>
                <el-button type="text" size="small" :disabled="row.state === 1" @click="delClick(row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页区域 -->
          <el-row type="flex" justify="end" align="middle" style="height: 60px">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page.page"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="page.pagesize"
              background
              layout="prev, pager, next, sizes, jumper"
              :total="total">
            </el-pagination>
          </el-row>
          <!-- 此处新增标签弹框小组件 -->
          <el-dialog title="新增目录" :visible.sync="addDialogVisible" width="30%">
            <!-- 主题内容区域 -->
            <el-form
              :model="addRuleForm"
              :rules="addRules"
              ref="addRuleFormRef"
              label-width="100px">
              <el-form-item label="所属学科" v-show="!queryUrl.subjectID">
                <el-select
                  v-model="addRuleForm.subjectID"
                  placeholder="请选择活动区域"
                >
                  <el-option
                    :label="item.label"
                    :value="item.value"
                    v-for="(item, index) in easyList"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="目录名称">
                <el-input
                v-model="addRuleForm.tagName"
                  placeholder="请输入目录名称"
                ></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="addDialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="addOK">确 认</el-button>
            </span>
          </el-dialog>
          <!-- 此处修改标签小组件 -->
      <el-dialog title="修改目录" :visible.sync="editDialogVisible" width="30%">
        <el-form
          :model="editRuleForm"
          :rules="addRules"
          ref="editRuleFormRef"
          label-width="80px"
          class="demo-ruleForm"
        >
          <el-form-item
            label="所属学科"
            style="width: 100%"
            v-show="!queryUrl.subjectID"
          >
            <el-select
              v-model="editRuleForm.subjectID"
              placeholder="请选择活动区域"
              style="width: 100%"
            >
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="(item, index) in easyList"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目录名称" prop="tagName" style="width: 100%">
            <el-input
              v-model="editRuleForm.tagName"
              style="width: 100%"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editOK">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { list, changeState, add, update, remove } from '@/api/hmmm/tags'
import { status } from '@/api/hmmm/constants'
import { simple } from '@/api/hmmm/subjects.js'
export default {
  // name: 'Tags',
  data () {
    return {
      // 专门接收新增表单的数据
      addRuleForm: {
        subjectID: '',
        tagName: ''
      },
      // 专门接收修改标签的数据
      editRuleForm: {
        id: '',
        subjectID: '',
        tagName: ''
      },
      // 定义规则
      addRules: {
        tagName: [{ required: true, message: '请输入学科名称', trigger: 'blur' }]
      },
      page: {
        page: 1, // 当前页数
        pagesize: 10, // 每页的条数
        tagsName: '' // 标签名称
      },
      total: 0, // 定义总数据
      queryUrl: {}, // 路径参数
      tagsList: [], // 定义标签的列表数组
      status: status, // 定义筛选
      addDialogVisible: false, // 定义控制添加标签弹框是否显示
      editDialogVisible: false, // 控制修改标签时的弹框是否显示
      easyList: [] // 定义获取简单列表的数组
    }
  },
  created () {
    // 获取数据，渲染在页面
    this.getList()
    this.getEasyList() // 获取简单数据，渲染在页面
    // 获取路径参数
    this.queryUrl.subjectID = this.$route.query.id
    this.queryUrl.name = this.$route.query.name
    // console.log(this.queryUrl)
    if (this.queryUrl.subjectID) {
      this.page.subjectID = this.queryUrl.subjectID
      this.getList()
    }
  },
  methods: {
    rowstyle({row, column, rowIndex, columnIndex}) {
      if(row.state === 0 && columnIndex === 5 ) {
        return "color: red"
      } else if (row.state === 1 && columnIndex === 5) {
        return "color: #67C23A"
      }
    },
    // 获取数据列表
    async getList () {
      const { data } = await list(this.page)
      // console.log(data)
      this.tagsList = data.items
      this.total = data.counts
    },
    // 页面尺寸大小(每页显示多少条)
    handleSizeChange (newsize) {
      this.page.pagesize = newsize
      this.getList()
    },
    // 页面容量(当前页是多少条)
    handleCurrentChange (newpage) {
      this.page.page = newpage // 赋值最新的页码
      this.getList() // 重新拉取数据
    },
    // 清空搜索框内容
    cleartext () {
      this.page.tagsName = ''
      this.getList()
    },
    // 启用or禁用
    async updateState (item) {
      const state1 = item.state === 1 ? 0 : 1
      try {
        await changeState({
          id: item.id,
          state: state1
        })
        this.getList() // 重新获取数据
      } catch (err) {
        this.$message('修改失败')
      }
    },
    // 获取简单列表
    async getEasyList () {
      try {
        const { data } = await simple()
        this.easyList = data
        // console.log(data)
      } catch (err) {
        this.$message('获取失败')
      }
    },
    // 确定新增添加按钮
    addOK () {
      if (this.queryUrl.subjectID) {
        //  const state = this.addRuleForm.isFrontDisplay ? 1:0
        this.addRuleForm.subjectID = parseInt(this.queryUrl.subjectID)
        this.$refs.addRuleFormRef.validate(async isOK => {
          if (!isOK) return
          try {
            await add(this.addRuleForm)
            this.getList()
            this.addDialogVisible = false
            this.$message.success('添加成功')
          } catch (err) {
            this.$message('添加失败')
          }
        })
      } else {
        const state = this.addRuleForm.isFrontDisplay ? 1 : 0
        this.$refs.addRuleFormRef.validate(async isOK => {
          if (!isOK) return
          try {
            await add(this.addRuleForm)
            this.getList()
            this.addDialogVisible = false
            this.$message.success('添加成功')
          } catch (err) {
            this.$message('添加失败')
          }
        })
      }
    },
    // 修改
    editClick (row) {
      // 点击修改的时候，出现弹层
      this.editDialogVisible = true
      this.editRuleForm.subjectID = row.subjectID
      this.editRuleForm.tagName = row.tagName
      this.editRuleForm.id = row.id
    },
    // 确定修改
    async editOK () {
      this.$refs.editRuleFormRef.validate(async isOK => {
        if (!isOK) return
        try {
          await update(this.editRuleForm)
          this.editDialogVisible = false
          this.getList() // 重新拉取数据
          this.$message.success('修改成功')
        } catch (err) {
          this.$message('修改失败')
        }
      })
    },
    // 删除标签
    delClick (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          // console.log(1)
          try {
            await remove(row)
            this.getList()
          } catch (err) {
            this.$message('操作失败')
          }
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          // console.log(2)
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 返回学科
    returnClick () {
      this.$router.back()
    }
  }
}
</script>

<style scoped lang='scss'>
.container {
  padding: 12px;
  .btn {
    margin-left: 20px;
  }
}

</style>
